<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="/css/ppyx/base.css" />
		<link rel="stylesheet" type="text/css" href="/css/ppyx/index.css" />
		<link href="/css/ppyx/zzsc.css" rel="stylesheet" type="text/css" />		
		<link href="/css/ppyx/css.css" rel="stylesheet" type="text/css" />
		<link href="/css/ppyx/styles.css" rel="stylesheet" type="text/css" />
		<script type="text/javascript" src="/js/jquery.min.js"></script>
		<script type="text/javascript" src="/js/jquery.easing.min.js"></script>
		<script src="/js/search.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
		<div id="container">
			<!--设置整个页面居中，需要设定margin并且需要设定width宽度-->
			<!--应用网页模板-->
			<% include template/header.html %>
			<!--新版导航结束-->
			<div style="width: 1190px; margin: 0px auto;padding: 5px 0px;"></div>

			<div class="content01">
				<div class="banner" id="banner" <!--style="margin-left: 240px-->">
					<a id="prevbt"></a>
					<a id="nextbt"></a>
					<ul>
						<li>
							<a href="#">
								<img src="/img/ppyx//banner.jpg" />
							</a>
						</li>
						<li>
							<a href="#">
								<img src="/img/ppyx//banner2.jpg" />
							</a>
						</li>
						<li>
							<a href="#">
								<img src="/img/ppyx//banner3.jpg" />
							</a>
						</li>

					</ul>

					<script>
						var li_Width = 1024;
						var banner_Li_Num = $('#banner li').length;
						$('#banner ul').css({
							'width': li_Width * banner_Li_Num,
							'marginLeft': -li_Width
						});

						function prevbt() {
							$('#prevbt').unbind('click');
							$('#banner li:last').detach().insertBefore('#banner li:first').parents('ul').css('marginLeft', -li_Width * 2).stop(true).animate({
								marginLeft: -li_Width
							}, 800, 'easeInOutBack', function() {
								$('#prevbt').bind('click', prevbt);
							});
						}

						function nextbt() {
							$('#nextbt').unbind();
							$('#banner ul').stop(true).animate({
								marginLeft: -li_Width * 2
							}, 800, 'easeInOutBack', function() {
								$('#banner ul').css('marginLeft', -li_Width).find('li:first').insertAfter('#banner li:last');
								$('#nextbt').bind('click', nextbt);
							})
						}

						$('#prevbt').click(function() {
							prevbt();
						})
						$('#nextbt').click(function() {
							nextbt();
						})

						banner_T = setInterval(banner_Auto, 5000)

						function banner_Auto() {
							nextbt();
						}
						$('#banner').hover(function() {
							clearInterval(banner_T);
						}, function() {
							banner_T = setInterval(banner_Auto, 5000);
						})
					</script>
				</div>

			</div>
			<div class="main">
				<div class="cp">
					<div class="cp_1">
						<div class="cp_title"></div>
						<div class="cp_list">
							<div class="cp_list1">
								<a href="#"><img src="/img/ppyx//cp_t1.jpg" /></a>
								<p>
									<a href="#">活细胞精华系列</a>
								</p>
								<span>活细胞精华有着显著的效果，让你体验一种意想不到的神奇效果。</span>
								<h>于美白事业的追求，我们永远都在路上 我们的态度永远都追崇一丝不苟
								</h>
							</div>
							<div class="cp_list2">
								<a href="#"><img src="/img/ppyx//cp_t2.jpg" /></a>
								<p>
									<a href="#">逆时空面膜系列</a>
								</p>
								<span>活细胞精华有着显著的效果，让你体验一种意想不到的神奇效果。</span>
								<h>于美白事业的追求，我们永远都在路上 我们的态度永远都追崇一丝不苟
								</h>
							</div>
						</div>
					</div>
					<div class="cp_2">
						<div class="cp_title2"></div>
						<div class="cp_2_list">
							<div class="cp_2_list1">
								<a href="#"><img src="/img/ppyx//cp_t3.jpg" /></a>
								<p>
									<a href="#">逆时空面膜系列</a>
								</p>
								<span>活细胞精华有着显著的效果，让你体验一种意想不到的神奇效果。</span>
								<h>于美白事业的追求，我们永远都在路上 我们的态度永远都追崇一丝不苟
								</h>
							</div>
							<div class="cp_2_list2">
								<a href="#"><img src="/img/ppyx//cp_t4.jpg" /></a>
								<p>
									<a href="#">逆时空面膜系列</a>
								</p>
								<span>活细胞精华有着显著的效果，让你体验一种意想不到的神奇效果。</span>
								<h>于美白事业的追求，我们永远都在路上 我们的态度永远都追崇一丝不苟
								</h>
							</div>
						</div>

					</div>
				</div>
				<div class="aut">
					<div class="aut_title"></div>
					<div class="aut_list">
						<ul>
							<li>
								<a href="#"><img src="/img/ppyx//aut_t1.jpg" /></a>
							</li>
							<li>
								<a href="#"><img src="/img/ppyx//aut_t2.jpg" /></a>
							</li>
							<li>
								<a href="#"><img src="/img/ppyx//aut_t3.jpg" /></a>
							</li>
							<li>
								<a href="#"><img src="/img/ppyx//aut_t4.jpg" /></a>
							</li>
						</ul>
					</div>
				</div>
			</div>

		</div>
		</div>
		</div>
		</div>
		<!--在线客服-->
            <div class="online_service_panel">
            	<a href="/service/service_online" target="_blank"><img src="/img/online_service/robot.jpg"/></a>
            	<a href="/service/service_online" target="_blank">在线客服</a>
            </div>
            <!--在线客服结束-->

		<!--footer开始-->
		
		<!--应用网页模板-->
		<% include template/footer.html %>
		<!--footer结束-->
		</div>
	</body>

</html>